<template>
  <div class="Newsxq">
    <!--面包屑 -->
    <el-breadcrumb separator="/" class="breadcrumb">
      <el-breadcrumb-item :to="{ path: '/' }">{{ $store.state.isChinese? '首页': 'главная'}}</el-breadcrumb-item>
      <el-breadcrumb-item @click="handleClassicNewsClick">{{ $store.state.isChinese ? '新闻公共' : 'Новостное объявление' }}</el-breadcrumb-item>
      <el-breadcrumb-item>{{$store.state.isChinese ? '新闻详情' : 'Детали новости' }}</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="Newsxq-header">
      <h3>{{ $store.state.isChinese  ? newsxq.titleCn : newsxq.titleRa }}</h3>
    </div>
    <div class="Newsxq-tupian" v-if="newsxq.imgUrl">
      <img :src="newsxq?.imgUrl?.startsWith('http') ? newsxq.imgUrl : `${this.$NuoYiUrl}${newsxq.imgUrl}`"
           alt="案例展示" class="carousel-image"/>
    </div>
    <div class="Newsxq-content">
      <p>{{ $store.state.isChinese  ? newsxq.descCn : newsxq.descRa }}</p>
    </div>
  </div>
  <!--  底部上一章下一章按钮 -->
  <div class="AnLixq-footer">
    <el-button-group class="AnLixq-footer-btn">
      <el-button type="primary" @click="prenewsxq">&lt;{{$store.state.isChinese ? '上一篇' : 'Предыдущая статья' }}</el-button>
      <el-button type="primary" @click="nextnewsxq">{{ $store.state.isChinese ? '下一篇' : 'Следующая статья' }}&gt;</el-button>
    </el-button-group>
  </div>
</template>

<script>
import EventBus from "@/eventBus";

export default {
  name: "Newsxq",
  data() {
    return {
      isChinese: true,
      newsxq: {},
      preNewsxq1: {},
      id: this.$route.query.id, // 获取路由参数
    }
  },
  computed: {
  },
  created() {
    // 获取新闻详情
    this.getnewsxq(this.id);
  },
  // watch: {
  //   '$route'(to, from) {
  //     // 监听路由变化，当变化时重新获取新闻详情
  //     if (to.name === 'Newsxq') {
  //       this.getnewsxq(to.query.id);
  //     }
  //   }
  // },
  mounted() {
    // 监听语言变化事件
    EventBus.on('languageChanged', (newIsChinese) => {
      this.isChinese = newIsChinese;
    });
  },
  beforeDestroy() {
    // 确保在组件销毁之前停止监听事件
    EventBus.off('languageChanged');
  },

  methods: {
    /* 获取新闻详情 */
    async getnewsxq(id) {
      //获取路由参数
      console.log("当前路由参数：", this.$route.query.id);
      const {data: res} = await this.$http.get("/news/findNewsById/" + id);
      if (res.code === 200) {
        this.newsxq = res.news;
      }
      console.log("新闻详情：", res);
    },
    /* 点击案例 */
    handleClassicNewsClick() {
        this.$router.back(); // 回退到新闻列表页面
    },
    /* 上一篇新闻 */
    async prenewsxq() {
      const {data: res} = await this.$http.get("/news/findNewsprevById/" + this.newsxq.id);
      console.log("上一篇新闻：", res);
      if (res.code === 200 ) {
        this.preNewsxq1  = res.news;
        // 跳转到上一篇新闻详情页面
        this.getnewsxq(this.preNewsxq1.id);
        console.log("跳转上一篇新闻详情页面");
      } else if (res.code === 1404) {
        this.$message.warning({
          message: '没有上一篇新闻',
          offset: 100 // 设置偏移量
        });
      }
    },
    /* 下一篇新闻 */
    async nextnewsxq() {
      const {data: res} = await this.$http.get("/news/findNewsnextById/" + this.newsxq.id);
      console.log("下一篇新闻：", res);
      if (res.code === 200) {
        this.preNewsxq1 = res.news;
        // 跳转到下一篇案例详情页面
        this.getnewsxq(this.preNewsxq1.id);
        console.log("跳转下一篇新闻详情页面"); // 跳转到下一篇案例详情页面
      } else if (res.code === 1404) {
        this.$message.warning({
          message: '没有下一篇新闻',
          offset: 100 // 设置偏移量
        });
      }
    },
  },
}

</script>

<style scoped>
.breadcrumb {
  position: fixed; /* 固定在视口 */
  top: 87.5px; /* 距离顶部0 */
  left: 0; /* 距离左侧0 */
  right: 0; /* 距离右侧0 */
  background: white; /* 背景色 */
  z-index: 10; /* 确保在其他内容之上 */
  padding: 20px; /* 添加内边距 */
  width: 100%; /* 宽度100% */
}

.Newsxq {
  margin-top: 30px
}

.Newsxq-header {
  margin-top: 100px;
  padding-left: 45px;
  padding-right: 45px;
}

.Newsxq {
  margin-top: 30px
}

.Newsxq-tupian {
  display: flex; /* 使用 flexbox 布局 */
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  padding: 50px; /* 添加一些内边距 */
  border-radius: 8px; /* 边角圆润 */

}

.Newsxq-tupian img {
  max-width: 100%; /* 图片最大宽度为容器的100% */
  max-height: 250px; /* 图片最大高度为容器的100% */
  height: auto; /* 可以设置一个最大高度 */
  border-radius: 6px; /* 图片圆角 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
  object-fit: fill;  /*允许填充满整个容器*/
}

.Newsxq-content {
  text-align: justify; /* 两端对齐 */
  padding-left: 45px; /* 设置内边距 */
  padding-right: 45px; /* 设置内边距 */
  font-size: 16px; /* 调整文字大小，可以根据需求修改 */
  text-indent: 2em; /* 段落开头空两个字，单位为em，可以根据需求调整 */
  line-height: 1.6; /* 调整行高，提高可读性，可选 */
  color: #333; /* 设置字体颜色，通常选择深色以提高可读性 */
  font-family: 'Georgia', serif; /* 设置字体类型，可以根据需要更改 */
}

/* 底部按钮 */
.AnLixq-footer-btn {
  display: flex;
  justify-content: space-between !important;
  margin-top: 20px;
}

.AnLixq-footer-btn .el-button {
  transition: background-color 0.3s ease; /* 添加平滑过渡 */
}

.AnLixq-footer-btn .el-button:active {
  background-color: #d15f25; /* 点击时的橙棕色 */
  color: white; /* 修改文字颜色为白色以提高对比度 */
}
</style>
